import React, { useState, useEffect } from 'react';

import  { useHook }  from '../../hooks';
export default function (props) {

    const [time, setTime] = useState(0)     
    let timer = useHook(3)
    let timer1

  
    const handleLoading = () => {  //  点击按钮，再一次 执行一遍
        setTime(3)
        timer1 = setInterval(() => {
            setTime((time) => {
                if(time <= 1) {
                    clearInterval(timer1)
                    timer1 = null
                }
                return time - 1})
        }, 1000)
    }

    // useEffect(() => {
    //     Promise.resolve().then(() => {
    //         console.log('ok1')         ////////  1
    //         throw 'throw error1'
    //     }).then(() => {
    //         console.log('ok2')
    //     }, err => {
    //         console.log('err->', err)    ///////   2
    //     }).then(() => {
    //         console.log('ok3')           ////////   3
    //         throw 'throw error3'
    //     }).then(() => {
    //         console.log('ok4')
    //     }).catch(err => {
    //         console.log('err->', err)     ////////    4
    //     })
    // },[])
    return (
        <div>
            <h1>
                {
                    timer || time
                    ? `loading ${timer || time}`
                    : <div>
                         <span>loaded</span>
                         <button onClick={handleLoading}>按钮</button>
                       </div> 
                }
            </h1>
        </div>
    )
}

/**
 * 2.使用自定义hook，实现以下场景
        页面初始化挂载时显示文字loading，3秒后 显示 文字loaded+一个按钮，然后在点击按钮，
        页面显示文字为loading并且按钮立即消失不显示，3秒后按钮再次显示并且页面显示文字loaded
 * 
 */